<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import Resume from "./components/Resume.vue";
import BasicDrawer from "./components/BasicDrawer.vue";
import TechDrawer from "./components/TechDrawer.vue";
import { reactive, watch } from "vue";

let formBasic = reactive({
  name: "老陈",
  mobile: "13245678888",
  email: "456789@qq.com",
  frontEndTime: "1年前端开发经验(至少写半年)",
  school: "国防科技大学",
  major: "计算机科学与技术（非理科专业可不填）",
  age: 22,
  salary: "18k（不填为面议）",
  blog: "www.blog.com(没有可不填)",
  github: "www.github.com(没有可不填)",
});

let techData = reactive({
  tools: [
    {
      name: "Gulp",
      select: true,
    },
    {
      name: "Grunt",
      select: true,
    },
    {
      name: "Webpack",
      select: true,
    },
    {
      name: "Parcel",
      select: true,
    },
    {
      name: "Vite",
      select: true,
    },
  ],
  webgl: [
    {
      name: "threejs",
      select: true,
    },
    {
      name: "canvas",
      select: true,
    },
  ],
  frame: [
    {
      name: "vue",
      select: true,
    },
    {
      name: "react",
      select: true,
    },
    {
      name: "UI设计",
      select: true,
    },
  ],
  list: [
    {
      name: "小程序",
      select: true,
    },
    {
      name: "移动端开发",
      select: true,
    },
    {
      name: "Typescript",
      select: true,
    },
    {
      name: "SSR",
      select: true,
    },
    {
      name: "NodeJS",
      select: true,
    },
    {
      name: "PHP",
      select: true,
    },
    {
      name: "JAVA",
      select: true,
    },
    {
      name: "Python",
      select: true,
    },
    {
      name: "GO",
      select: true,
    },
    {
      name: "MYSQL",
      select: true,
    },
    {
      name: "MongoDB",
      select: true,
    },
    {
      name: "Redis",
      select: true,
    },
  ],
});

let data = reactive({
  BasicDrawerVisible: false,
  techDrawerVisible: true,
});

function setVisibleFn(name) {
  //   console.log(name);
  data[name] = true;
}

watch(data, () => {
  console.log(techData);
});
</script>

<template>
  <Resume
    @setVisible="setVisibleFn"
    :form="formBasic"
    :techData="techData"
  ></Resume>
  <BasicDrawer
    :visible="data.BasicDrawerVisible"
    :form="formBasic"
    @setVisible="(content) => (data.BasicDrawerVisible = content)"
  ></BasicDrawer>
  <TechDrawer
    :visible="data.techDrawerVisible"
    :techData="techData"
    @setVisible="(content) => (data.techDrawerVisible = content)"
  ></TechDrawer>
</template>

<style>
* {
  padding: 0;
  margin: 0;
}
</style>
